<template>
  <!-- #ifdef APP-NVUE -->
  <refresh :display="display" @refresh="onrefresh" @pullingdown="onpullingdown">
    <slot />
  </refresh>
  <!-- #endif -->
  <!-- #ifndef APP-NVUE -->
  <view ref="uni-refresh" class="uni-refresh" v-show="isShow">
    <slot />
  </view>
  <!-- #endif -->
</template>

<script>
export default {
  name: 'UniRefresh',
  props: {
    display: {
      type: [String],
      default: 'hide',
    },
  },
  data() {
    return {
      pulling: false,
    };
  },
  computed: {
    isShow() {
      if (this.display === 'show' || this.pulling === true) {
        return true;
      }
      return false;
    },
  },
  created() {},
  methods: {
    onchange(value) {
      this.pulling = value;
    },
    onrefresh(e) {
      this.$emit('refresh', e);
    },
    onpullingdown(e) {
      // #ifdef APP-NVUE
      this.$emit('pullingdown', e);
      // #endif
      // #ifndef APP-NVUE
      var detail = {
        viewHeight: 90,
        pullingDistance: e.height,
      };
      this.$emit('pullingdown', detail);
      // #endif
    },
  },
};
</script>

<style scoped>
.uni-refresh {
  height: 0;
  overflow: hidden;
}
</style>
